<template>
  <div>
     <ul>
      <li v-for="m in messages" :key="m.id">
        <!-- <router-link :to="'/home/message/detail/'+m.id">{{m.title}}</router-link> -->
        <!-- <router-link :to="`/home/message/detail/${m.id}?id2=${m.id}&title=${m.title}`">{{m.title}}</router-link> -->
        <router-link :to="{
          name:'MessageDetail',
          params:{id:m.id},
          query:{id2:m.id,title:m.title}
        }">{{m.title}}</router-link>
        <!-- 
          path和params不能同时出现，因为path的值不能写成
         -->
        <button @click="pushShow(m)">push按钮</button>
        <button @click="replaceShow(m)">replace按钮</button>
      </li>
    </ul>
    <button @click="$router.back()">返回</button>
    <hr>

    <router-view msg="chenzonghan"></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messages: [],
    };
  },
  methods:{
    pushShow(m){
      // push的参数是一个路径
      // this.$router.push(`/home/message/detail/${m.id}?id2=${m.id}&title=${m.title}`)
      this.$router.push({
        name:'MessageDetail',
        params:{id:m.id},
        query:{id2:m.id,title:m.title}
      })
    },
    replaceShow(m){
      this.$router.replace(`/home/message/detail/${m.id}?id2=${m.id}&title=${m.title}`)
    }
  },
  mounted() {
    // 模拟异步请求数据
    setTimeout(() => {
      const messages = [
        { id: 1, title: 'message001' },
        { id: 3, title: 'message002' },
        { id: 5, title: 'message003' },
      ];
      this.messages = messages;
    }, 1000);
  },
};
</script>

<style scoped></style>
